<template>
    <view class="outletQuery">
        <nut-searchbar :clearable="false" placeholder="请选择省/市/区" disabled @change="search" background="#fff"
            v-model="searchValue" @click="openAddress">
            <template v-slot:leftin>
                <Locationg3 size="12" />
            </template>
            <template v-slot:rightin>
                <triangle-down size="12" />
            </template>
        </nut-searchbar>
        <view class="cu-card article place" v-show="isType == 2">
            <view class="cu-item shadow" v-for="item in placeDateList" :key="item.BRANCHCOMPANYNO">
                <view class="flex align-center padding-l20">
                    <view class="place-icon"></view>
                    <view class="place-title">{{ item.COMPANYNAME }}</view>
                </view>
                <view class="place-content solid-bottom::after">
                    <view>地址：{{ item.LOCAL }}</view>
                    <view class="margin-t6">电话：{{ item.tel }}</view>
                </view>
                <view class="flex align-center place-footer ">
                    <view class="flex align-center justify-center width50 padding-t20 padding-b20 solid-right::after"
                        @click="lookMap(item)">
                        <view class="look-map"></view>
                        <view>查看地图</view>
                    </view>
                    <view class="flex align-center justify-center padding-t20 padding-b20 width50"
                        @click="onCall(item.tel)">
                        <view class="call"></view>
                        <view>拨打电话</view>
                    </view>
                </view>
            </view>
        </view>
        <no-data text="暂无网点信息，请选择省/市/区" v-show="isType == 3"></no-data>
        <SelectAddress :show="isShow" ref="refCity" @selectAddress="selectAddress" class="select_address" showonlyTF="false"
            @close="doClose" />
    </view>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { TriangleDown, Locationg3 } from '@nutui/icons-vue-taro';
import Taro, { useReady } from '@tarojs/taro';
import SelectAddress from '@/components/SelectAddress/index.vue'
import noData from '@/components/noData/index.vue'
import { getCompanyAddress, getRecommandBranch } from '@/@api/order';

export interface Branch {
    COMPANYNAME: string,
    tel: string,
    LOCAL: string,
    LAT: string,
    LNG: string,
    BRANCHCOMPANYNO: any,
}
export interface SelectCity {
    carriagetype: string,
    province: string,
    city: string,
    detailaddress: string
}

useReady(() => {
    Taro.setNavigationBarTitle({
        title: '网点查询'
    })
})

const refCity: any = ref<InstanceType<typeof SelectAddress>>()

const isType = ref(1)

const searchValue = ref<string>('')

const placeDateList = ref<Branch[]>([])

const isShow = ref(false)

const cityParams = ref<SelectCity>({
    carriagetype: '送货',
    province: '',
    city: '',
    detailaddress: '',
})

function doClose() {
    isShow.value = false
}



onMounted(() => {
    getLocation()
})

/**
 * @function 查看地图
 * */
const lookMap = (item: Branch) => {
    Taro.openLocation({
        name: item.COMPANYNAME,
        address: item.LOCAL,
        latitude: Number(item.LAT),
        longitude: Number(item.LNG),
        scale: 18
    })
}

/**
 * @function 拨打电话
 * */
const onCall = (tel: string) => {
    Taro.makePhoneCall({
        phoneNumber: tel //仅为示例，并非真实的电话号码
    })
}

/**
 * @function 打开地址
 * */
const openAddress = () => {
    isShow.value = true
}

/**
 * @function 选择地址
 * */
const selectAddress = (params) => {
    cityParams.value.province = params[0]
    cityParams.value.city = params[1]
    cityParams.value.detailaddress = params[2]
    getDateList()
    searchValue.value = params.join('-')

}

/**
 * @function 清空当前
 * */
const search = () => {
    cityParams.value.province = ''
    cityParams.value.city = ''
    cityParams.value.detailaddress = ''
    getDateList()
}

/**
 * @function 获取当前位置
 * */
const getLocation = () => {
    Taro.getSetting({
        withSubscriptions: true,
        success(res) {
            console.log(res, 155);
            if (!Object.keys(res.authSetting).includes('scope.userLocation')) {


                return Taro.getLocation({
                    type: 'wgs84',
                    success: function (res) {
                        getCity(res.latitude, res.longitude)
                    }
                })

            }
            if (!res.authSetting['scope.userLocation']) {
                Taro.showModal({
                    title: '注意',
                    content: '是否重新授权',
                    success() {

                        Taro.openSetting({
                            withSubscriptions: true,
                            success(res) {
                                console.log(res, 160);
                                Taro.getLocation({
                                    type: 'wgs84',
                                    success: function (res) {
                                        getCity(res.latitude, res.longitude)
                                    }
                                })

                            }
                        })
                    },
                })
            }
            else {
                Taro.getLocation({
                    type: 'wgs84',
                    success: function (res) {
                        getCity(res.latitude, res.longitude)
                    }
                })

            }

        }
    })
}

/**
 * @function 获取当前的省市区
 * */
async function getCity(lat: number, lng: number) {
    const res = await getCompanyAddress(lng + ',' + lat)

    const data = res.data.data.datas.addressComponent
    cityParams.value.province = data.province
    cityParams.value.city = data.city
    cityParams.value.detailaddress = data.district
    searchValue.value = `${data.province}-${data.city}-${data.district}`
    getDateList()
}

/**
 * @function 获取网点列表
 * */
const getDateList = async () => {
    // Taro.showLoading({ title: '加载中', })
    const res = await getRecommandBranch(cityParams.value)

    // Taro.hideLoading()

    const data = JSON.parse(res.data.data)

    placeDateList.value = data.branch
    if (placeDateList.value && placeDateList.value.length > 0) {
        isType.value = 2
    } else {
        isType.value = 3
    }
}
</script>


<style lang="scss">
.outletQuery {
    height: 100%;
    background-color: #f5f5f5;
    box-sizing: border-box;
    padding: 100px 0 20px 0;

    .place-footer {
        display: flex;
        justify-content: space-around;
    }

    .nut-searchbar {
        position: fixed;
        width: 100%;
        height: 100px;
        top: 0;
        background-color: #fff;
        z-index: 100;
    }

    .outletQuery_search {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        background-color: #FFF;
    }

    .outletQuery_container {
        height: calc(100% - 96rpx);
        background-color: #F5F5F5;
        position: relative;

        &::before {
            content: "";
            display: table;
        }

        .outletQuery_container_empty {
            width: 80%;
            margin: 280rpx auto;
            text-align: center;

            image {
                width: 300rpx;
                height: 344rpx;
            }
        }
    }

    .place {
        .cu-item {
            padding: 30px 0 0 0
        }

        box-sizing: border-box;
        height:93vh;
        overflow: auto;
        font-size: 30px;

        .place-title {
            color: #252525;
            font-weight: bold;
        }

        .place-icon {
            width: 34px;
            height: 34px;
            background: url('../../assets/images/index/服务查询/shixiaojiage_icon_wangdian@2x.png') no-repeat;
            background-size: cover;
            margin-right: 10px;
        }

        .place-content {
            font-size: 24px;
            padding: 20px 20px 24px 66px;
            color: #666666;
        }

        .place-footer {
            font-size: 28px;
            font-weight: bold;
            color: #252525;

            .look-map {
                width: 28px;
                height: 28px;
                background: url('../../assets/images/index/服务查询/wangdianchaxun_icon_chakanditu@2x.png') no-repeat;
                background-size: cover;
                margin-right: 10px;
            }

            .call {
                width: 28px;
                height: 28px;
                background: url('../../assets/images/index/服务查询/wangdianchaxun_icon_bodadianhua@2x.png') no-repeat;
                background-size: cover;
                margin-right: 10px;
            }
        }
    }

}
</style>




